<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue列表渲染</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .demo-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
      }
      .item {
        padding: 8px;
        margin: 5px 0;
        background: #f5f5f5;
      }
      .student {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .high-score {
        background: #d4edda;
      }
      .low-score {
        background: #f8d7da;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>Vue列表渲染演示</h2>

      <!-- 基础数组渲染 -->
      <div class="demo-section">
        <h3>1. 基础数组渲染</h3>
        <ul>
          <li v-for="fruit in fruits" :key="fruit">{{fruit}}</li>
        </ul>
      </div>

      <!-- 带索引的数组渲染 -->
      <div class="demo-section">
        <h3>2. 带索引的数组渲染</h3>
        <div v-for="(color, index) in colors" :key="index" class="item">
          {{index + 1}}. {{color}}
        </div>
      </div>

      <!-- 对象数组渲染 -->
      <div class="demo-section">
        <h3>3. 对象数组渲染</h3>
        <div
          v-for="student in students"
          :key="student.id"
          class="student item"
          :class="{'high-score': student.score >= 80, 'low-score': student.score < 60}"
        >
          <span>{{student.name}} (ID: {{student.id}})</span>
          <span>分数: {{student.score}}</span>
          <button @click="updateScore(student.id)">+10分</button>
        </div>
      </div>

      <!-- 对象属性渲染 -->
      <div class="demo-section">
        <h3>4. 对象属性渲染</h3>
        <div v-for="(value, key) in userInfo" :key="key" class="item">{{key}}: {{value}}</div>
      </div>

      <!-- 数字范围渲染 -->
      <div class="demo-section">
        <h3>5. 数字范围渲染</h3>
        <span v-for="n in 10" :key="n" style="margin-right: 10px">{{n}}</span>
      </div>

      <!-- 嵌套循环 -->
      <div class="demo-section">
        <h3>6. 嵌套循环</h3>
        <div v-for="category in categories" :key="category.name">
          <h4>{{category.name}}</h4>
          <ul>
            <li v-for="item in category.items" :key="item">{{item}}</li>
          </ul>
        </div>
      </div>

      <!-- 动态列表操作 -->
      <div class="demo-section">
        <h3>7. 动态列表操作</h3>
        <input v-model="newItem" @keyup.enter="addItem" placeholder="输入新项目" />
        <button @click="addItem">添加</button>
        <button @click="shuffleList">随机排序</button>
        <button @click="reverseList">反转列表</button>

        <div v-for="(item, index) in dynamicList" :key="item.id" class="item">
          {{item.text}}
          <button @click="removeItem(index)" style="margin-left: 10px">删除</button>
        </div>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue

      const App = {
        setup() {
          const fruits = ref(['苹果', '香蕉', '橙子', '葡萄'])
          const colors = ref(['红色', '绿色', '蓝色', '黄色'])

          const students = ref([
            { id: 1, name: '张三', score: 85 },
            { id: 2, name: '李四', score: 92 },
            { id: 3, name: '王五', score: 78 },
            { id: 4, name: '赵六', score: 55 }
          ])

          const userInfo = ref({
            姓名: '张三',
            年龄: 25,
            职业: '前端开发',
            城市: '北京'
          })

          const categories = ref([
            {
              name: '水果',
              items: ['苹果', '香蕉', '橙子']
            },
            {
              name: '蔬菜',
              items: ['白菜', '萝卜', '土豆']
            }
          ])

          const newItem = ref('')
          const dynamicList = ref([
            { id: 1, text: '项目1' },
            { id: 2, text: '项目2' },
            { id: 3, text: '项目3' }
          ])

          let nextId = 4

          const updateScore = studentId => {
            const student = students.value.find(s => s.id === studentId)
            if (student) {
              student.score = Math.min(100, student.score + 10)
            }
          }

          const addItem = () => {
            if (newItem.value.trim()) {
              dynamicList.value.push({
                id: nextId++,
                text: newItem.value.trim()
              })
              newItem.value = ''
            }
          }

          const removeItem = index => {
            dynamicList.value.splice(index, 1)
          }

          const shuffleList = () => {
            for (let i = dynamicList.value.length - 1; i > 0; i--) {
              const j = Math.floor(Math.random() * (i + 1))
              ;[dynamicList.value[i], dynamicList.value[j]] = [
                dynamicList.value[j],
                dynamicList.value[i]
              ]
            }
          }

          const reverseList = () => {
            dynamicList.value.reverse()
          }

          return {
            fruits,
            colors,
            students,
            userInfo,
            categories,
            newItem,
            dynamicList,
            updateScore,
            addItem,
            removeItem,
            shuffleList,
            reverseList
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
